<template>
  <div class="about">
  <el-tabs :tab-position="tabPosition" v-model="active" style="margin:50px; minHeight:440px">
    <el-tab-pane label="个人中心" name='first'>
      <Info />
    </el-tab-pane>
    <el-tab-pane label="我的收藏" name='second'>
        <Collect/>
    </el-tab-pane>
    <el-tab-pane label="我的订单" name='three'>
        <Order/>
    </el-tab-pane>
    <el-tab-pane label="我的评论" name='four'>
        <Evaluate/>
    </el-tab-pane>
    <el-tab-pane label="个人信息">
        <Information/>
    </el-tab-pane>
    <el-tab-pane label="修改密码">
        <Alter/>
    </el-tab-pane>
    <el-tab-pane label="重要日子">
        <Leave/>
    </el-tab-pane>
  </el-tabs>
  </div>
</template>
<script>
import Info from "../components/Info"; //个人中心
import Collect from "../components/Collect"; //我的收藏
import Order from "../components/Order"; //我的订单
import Evaluate from "../components/Evaluate"; //我的评论
import Information from "../components/Information"; //个人信息
import Alter from "../components/Alter";     //修改信息

import Leave from "../components/Leave";        //重要日子

export default {
  data() {
    return {
      tabPosition: "left",
    };
  },
  created(){
     this.$store.state.navIndex="0"
  },
  computed:{
      active:{
        get(){
          return this.$store.state.activeName
        },
        set(v){
          this.$store.state.activeName=v
        }
          
      }
    },
  components: {
    Info,
    Collect,
    Order,
    Evaluate,
    Information,
    Alter,
    Leave
  }
};
</script>
<style lang="css" scoped>
  .about{
    margin:0 auto;
    width:75%;
    /* min-height: 770px; */
    background-image: url(../assets/body_bg.png);
  }
  .el-tabs{
    position: relative;
    top:15px;
  } 
  .about{font-family: "KaiTi"}
</style>